<template>
  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :span="12">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <h1 style="font-weight: bolder">无库存商品</h1>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <h1 style="font-weight: bolder">有库存商品</h1>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">

          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            商品名称或编码：
            <a-input allowClear style="width: 240px;margin-right: 20px" v-model="nullKey"/>
            <a-button @click="loadNullGoodsList" type="primary" icon="search">查询</a-button>&nbsp;
            <!--<a-button @click="" type="primary" icon="plus">添加库存</a-button>-->
          </div>


          <!-- table区域-begin -->
          <div>
            <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
              <!--<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
              <!--selectedRowKeys.length }}</a>项-->
              <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
            <!--</div>-->

            <a-table
              ref="table"
              size="small"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="nullGoodsColumns"
              :dataSource="nullGoodsList"
              :pagination="ipaginationForNull"
              :loading="loading"
              class="j-table-force-nowrap"
              @change="handleTableChange">

               <span slot="action" slot-scope="text, record">
                <a-dropdown>
                  <a class="ant-dropdown-link">操作 <a-icon type="down"/></a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="handleEdit(record)">修改数量或成本价</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>
            </a-table>
          </div>

          <jxc-goods-modal ref="modalForm" @ok="modalFormOk"></jxc-goods-modal>
        </a-col>
        <a-col :span="12">

          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            商品名称或编码：
            <a-input allowClear style="width: 240px;margin-right: 20px" v-model="haveKey"/>
            <a-button @click="loadData" type="primary" icon="search">查询</a-button>&nbsp;
          </div>

          <!-- table区域-begin -->
          <div>
            <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
              <!--<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
              <!--selectedRowKeys.length }}</a>项-->
              <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
            <!--</div>-->

            <a-table
              ref="table"
              size="small"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="haveGoodsList"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              @change="handleTableChange">

              <span slot="action" slot-scope="text, record">
                <a-dropdown>
                  <a class="ant-dropdown-link">操作 <a-icon type="down"/></a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="handleEdit(record)">修改数量或成本价</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a @click="handleDetail(record)">详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>

            </a-table>
          </div>

          <jxc-goods-modal ref="modalForm" @ok="modalFormOk"></jxc-goods-modal>
        </a-col>
      </a-row>
    </div>

  </a-card>
</template>

<script>

  import {httpAction, getAction,deleteAction} from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JxcGoodsModal from './modules/JxcGoodsModal'

  export default {
    name: 'JxcGoodsList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      JxcGoodsModal
    },
    data() {
      return {
        description: 'jxc_goods管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '编码',
            align: "center",
            dataIndex: 'goodsCode'
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'goodsName'
          },
          {
            title: '型号',
            align: "center",
            dataIndex: 'goodsModel'
          },
          {
            title: '单位',
            align: "center",
            dataIndex: 'goodsUnit'
          },

          {
            title: '库存',
            align: "center",
            dataIndex: 'inventoryQuantity'
          },

          {
            title: '采购价格',
            align: "center",
            dataIndex: 'purchasingPrice'
          },
          {
            title: '库存金额',
            align: "center",
            dataIndex: 'inventoryAmount'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 80,
            scopedSlots: {customRender: 'action'}
          }
        ],
        nullGoodsColumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '编码',
            align: "center",
            dataIndex: 'goodsCode'
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'goodsName'
          },
          {
            title: '型号',
            align: "center",
            dataIndex: 'goodsModel'
          },
          {
            title: '单位',
            align: "center",
            dataIndex: 'goodsUnit'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            fixed: "right",
            width: 80,
            scopedSlots: {customRender: 'action'}
          }
        ],
        haveGoodsList: [],
        nullGoodsList: [],
        haveKey: '',
        nullKey: '',
        url: {
          list: "/jxc.baseData/jxcSupplier/openingInventory",
          nullList: "/jxc.baseData/jxcSupplier/nullOpeningInventory",
          delete: "/jxc.baseData/jxcSupplier/deleteGoods",
          deleteBatch: "/jxc.baseData/jxcSupplier/deleteBatch",
          exportXlsUrl: "/jxc.baseData/jxcSupplier/exportXls",
          importExcelUrl: "jxc.baseData/jxcSupplier/importExcel",
          selectByKeyUrl: "/jxc.baseData/jxcSupplier/selectByKey"
        },
        dictOptions: {},
        ipaginationForNull:{},
        ipagination:{}
      }
    },
    created() {
      console.log("自定义created");
      this.loadData();
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig() {
      },
      handleDelete(id){
        deleteAction(this.url.delete,{id:id}).then((res)=>{
          if (res.success){
            this.loadData();
          }
        })
      },
      loadData() {
        this.loadNullGoodsList();
        getAction(this.url.list, {
          key: this.haveKey,
          pageNo: this.ipagination.current,
          pageSize: this.ipagination.pageSize
        }).then((res) => {
          if (res.success) {
            this.ipagination.current = res.result.pageNo;
            this.ipagination.pageSize = res.result.pageSize;
            this.ipagination.total = res.result.total;
            this.haveGoodsList = res.result.data;
          }
        })
      },
      loadNullGoodsList() {
        getAction(this.url.nullList, {
          key: this.nullKey,
          pageNo: this.ipaginationForNull.current,
          pageSize: this.ipaginationForNull.pageSize
        }).then((res) => {
          if (res.success) {
            this.ipaginationForNull.current = res.result.pageNo;
            this.ipaginationForNull.pageSize = res.result.pageSize;
            this.ipaginationForNull.total = res.result.total;
            this.nullGoodsList = res.result.data;
          }
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>